<script lang="ts" setup>
//第三个
import { IndexShowData } from "@/api/interface";
import Image from "@/components/Black/Image.vue";

interface Props {
  data: IndexShowData[] | undefined;
}

defineProps<Props>();

//图片配置
const configImg = {
  small: "medium_large", //366
  medium: "medium_large", //333
  large: "medium_large", //303
};
</script>

<template>
 
  <el-row :gutter="20" v-if="data?.length !== 0">
    <el-col :xs="24" :sm="12" :md="8" v-for="item in data">
      <router-link :to="`/single/${item.id}`" class="tile tile-3up">
        <div class="tile__media">
         
          <!---->
          <Image :data="item.image" :config="configImg"></Image>
        </div>

        <div class="tile__description">
          <div class="tile__head">
            <div class="tile__category">
              <span v-for="key in item.cat"> {{ key.name }} </span>
            </div>
            <div class="tile__headline">{{ item.title }}</div>
          </div>
          <div class="tile__timestamp">{{ item.date }}</div>
        </div>
      </router-link>
    </el-col>
  </el-row>
  <div v-else>
    <el-skeleton animated :throttle="500">
      <template #template>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" v-for="index in 6" :key="index">
            <div class="tile tile-3up">
              <div class="tile__media">
                <el-skeleton-item
                  variant="image"
                  style="width: auto; height: 100%"
                />
              </div>

              <div class="tile__description">
                <div class="tile__head">
                  <div class="tile__category">
                    <span>
                      <el-skeleton-item variant="text" style="width: 15%" />
                    </span>
                  </div>
                  <div class="tile__headline">
                    <el-skeleton-item variant="h3" style="width: 50%" />
                    <el-skeleton-item variant="h3" style="width: 100%" />
                  </div>
                </div>
                <div class="tile__timestamp">
                  <el-skeleton-item variant="text" style="width: 55%" />
                </div>
              </div>
            </div>
          </el-col>
        </el-row> </template
    ></el-skeleton>
  </div>
</template>

<style lang="less" scoped>
.el-col {
  margin-top: 36px;
}
.tile-3up {
  flex-direction: column;
  width: 303px;
  height: 100%;
  .tile__media {
    width: 100%;
    height: 170px;
    min-height: auto;
    flex-basis: auto;
    flex-shrink: 1;
  }
  .tile__description {
    padding: 24px;
    justify-content: space-between;
    flex-basis: auto;
    .tile__head {
      .tile__category {
        margin-bottom: 4px;
        letter-spacing: 0em;
        font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
          "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        //多行溢出

        overflow: hidden;
        max-height: 40px;
        line-height: 20px;
      }
      .tile__headline {
        font-size: 19px;
        line-height: 1.21053;
        font-weight: 700;
        letter-spacing: 0.012em;
        font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons",
          "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
      }
    }
  }
  .tile__timestamp {
    margin-top: 8px;
    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
      "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    letter-spacing: 0em;
  }
}

@media only screen and (max-width: 734px) {
  .el-col {
    margin-top: 24px;
  }
  .tile-3up {
    flex-direction: column;
    width: 333px;
    .tile__media {
      width: 100%;
      height: 187px;
      min-height: auto;
      flex-basis: auto;
      flex-shrink: 1;

      padding-top: inherit;
    }
    .tile__description {
      padding: 24px;
      justify-content: space-between;
      flex-basis: auto;
    }
    .tile__category {
      margin-bottom: 4px;
    }
    .tile__timestamp {
      margin-top: 8px;
    }
  }
}
@media only screen and (max-width: 1068px) {
  .tile-3up {
    flex-direction: column;
    width: 100%;
  }
  .tile__media {
    width: 100%;
    height: auto;
    min-height: auto;
    flex-basis: auto;
    flex-shrink: 1;
    //padding-top: 56.25%;
    height: 0;
    position: relative;
  }
  .tile__description {
    padding: 24px;
    justify-content: space-between;
    flex-basis: auto;
  }
  .tile__category {
    margin-bottom: 8px;
  }
  .tile__timestamp {
    margin-top: 8px;
  }
}
</style>
